define(function(require, exports, module) {

  var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);

    var canvas = document.getElementById('myCanvas');

    if (!canvas.getContext) {
      return
    }
    var ctx = canvas.getContext('2d');

    var myGradient = ctx.createLinearGradient(0, 0, 0, 160);
    myGradient.addColorStop(0, "#BABABA");
    myGradient.addColorStop(1, "#636363");

    var btnEvent = {
      kuang: {
        show: "图",
        fn: function() {
          ctx.strokeRect(10, 10, 200, 100);

          var image = new Image();

          image.onload = function() {

            if (image.width > canvas.width)
              canvas.width = image.width;
            if (image.height > canvas.height)
              canvas.height = image.height;

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(image, 0, 0);
          }
          image.src = "/assets/img/check.png";
        }
      },

      fang: {
        show: "方",
        fn: function() {
          ctx.fillStyle = 'yellow';
          ctx.fillRect(50, 50, 200, 100);
        }
      },
      xian: {
        show: "线",
        fn: function() {
          ctx.beginPath(); // 开始路径绘制
          ctx.moveTo(20, 20); // 设置路径起点
          ctx.lineTo(200, 20); // 绘制一条到200, 20的直线
          ctx.lineWidth = 1.0; // 设置线宽
          ctx.strokeStyle = "#CC0000"; // 设置线的颜色
          ctx.stroke(); // 进行线的着色，这时整条线才变得可见
        }
      },
      circle: {
        show: "圆",
        fn: function() {
          ctx.beginPath();
          ctx.arc(60, 60, 50, Math.PI / 8, Math.PI / 2, true);
          ctx.strokeStyle = "#CC0000";
          ctx.stroke();
        }
      },
      wenzi: {
        show: "字",
        fn: function() {
          // 设置字体
          ctx.font = "Bold 30px Arial";
          // 设置对齐方式
          ctx.textAlign = "middle";
          // 设置填充颜色
          ctx.fillStyle = "#ff8000";
          // 设置字体内容，以及在画布上的位置
          ctx.fillText("ベアーの子", 50, 100);

          ctx.font = "Bold 100px Arial";
          // 绘制空心字
          ctx.strokeText("BGM", 200, 100);
          ctx.strokeText("BGM", 204, 104);
        }
      },
      yinying: {
        show: "影",
        fn: function() {
          ctx.shadowOffsetX = 10; // 设置水平位移
          ctx.shadowOffsetY = 10; // 设置垂直位移
          ctx.shadowBlur = 5; // 设置模糊度
          ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色
        }
      }
    }

    _.each(btnEvent, config => {
      $('#btn-group').append($('<button class="btn btn-default">').click(config.fn).html('画' + config.show))
    })

    function clearX() {
      var i = 100;
      var fillIn = setInterval(function() {
        i -= 5;
        if (i === 0) {
          clearInterval(fillIn);
          ctx.fillStyle = 'rgba(255,0,0,0)';
          ctx.clearRect(0, 0, 300, 150);
          ctx.fillRect(0, 0, 300, 150);
          return;
        }
        var color = 'rgba(255,0,0,' + (i / 100) + ')';
        ctx.fillStyle = color;
        ctx.clearRect(0, 0, 300, 150);
        ctx.fillRect(0, 0, 300, 150);
        
      }, 1000 / 60);
    }

    $('#clearX').click(clearX)
  }

  return main;
})
